<template>
  <div>
    <nly-breadcrumb>
      <nly-breadcrumb-item
        icon="nlyfont nly-icon-home-fill"
        to="/"
        text="首页"
      />
      <nly-breadcrumb-item
        icon="nlyfont nly-icon-outlet"
        to="/typelist"
        active
        text="盲盒系列管理"
      />
    </nly-breadcrumb>
    <Modal
      :title="update ? '修改盲盒系列' : '添加盲盒系列'"
      :styles="{ width: '55%' }"
      v-model="modalAddText"
      class-name="vertical-center-modal"
      :footer-hide="true"
      @on-cancel="cancel"
    >
      <div style="
                width: 100%;
                line-height: 30px;
                text-algin: end;
                margin-right: 10px;
              ">
        <Form ref="dataText" :model="dataText" :label-width="100">
          <FormItem label="系列名称" prop="name">
            <Input v-model="dataText.name" placeholder="请输入盲盒系列名称" />
          </FormItem>
          <FormItem label="系列价格" prop="price">
            <Input v-model="dataText.price" placeholder="请输入盲盒系列价格" />
          </FormItem>
          <form-item label="系列详情">
            <div class="formItemImage">
              <div style="width: 100%">
                <ImagePanel
                    style="margin-left: 10px"
                    @on-confirm="confirm_images0"
                    mode="multi"
                >
                  <Button type="primary">系列详情</Button>
                </ImagePanel>
              </div>
              <div
                  style="width: 100%; cursor: zoom-in;display: flex;align-items: center;flex-wrap: wrap;"
                  v-if="introduceImg.length > 0"
              >
                <div v-for="(item, index) in introduceImg" :key="index" style="position: relative;">
                  <img
                      :src="item"
                      style="width: 150px; height: 150px; cursor: zoom-in;margin-right: 10px;margin-bottom: 10px;"
                      alt=""
                  />
                  <div style="width: 20px;height: 20px;position: absolute;top: -10px;right: 0px;background: #eeeeee;border-radius: 50%;overflow: hidden;text-align: center;line-height: 20px;">
                    <Icon
                        class="delete-img"
                        type="md-close"
                        color="#ffffff"
                        style="margin: auto"
                        @click="delete_image(index)"
                    />
                  </div>

                </div>
              </div>
            </div>
          </form-item>
          <FormItem label="类型图片" prop="img">
            <div class="formItemImage">
              <div style="width: 100%">
                <ImagePanel
                  style="margin-left: 10px"
                  @on-confirm="confirm_images"
                  mode="multi"
                >
                  <Button type="primary">类型图片</Button>
                </ImagePanel>
              </div>
              <div
                style="width: 150px; height: 150px; cursor: zoom-in"
                v-if="dataText.img"
              >
                <img
                  :src="dataText.img"
                  style="width: 150px; height: 150px; cursor: zoom-in"
                  alt=""
                />
              </div>
            </div>
          </FormItem>
          <FormItem label="盒子图片" prop="img">
            <div class="formItemImage">
              <div style="width: 100%">
                <ImagePanel
                  style="margin-left: 10px"
                  @on-confirm="confirm_images1"
                  mode="multi"
                >
                  <Button type="primary">盒子图片</Button>
                </ImagePanel>
              </div>
              <div
                style="width: 150px; height: 150px; cursor: zoom-in"
                v-if="dataText.icon"
              >
                <img
                  :src="dataText.icon"
                  style="width: 150px; height: 150px; cursor: zoom-in"
                  alt=""
                />
              </div>
            </div>
          </FormItem>

          <FormItem>
            <Button type="primary" @click="AddText('dataText')">提交</Button>
            <Button @click="ModalClose" style="margin-left: 8px">取消</Button>
          </FormItem>
        </Form>
      </div>
    </Modal>
    <!-- Main content -->
    <section class="content" style="padding: 0px 10px 0px 10px">
      <row>
        <i-col :md="8" :sm="12">
          <i-button
            type="primary"
            style="margin-left: 16px; margin-bottom: 10px"
            @click="addShow"
            icon="md-add"
            >添加盲盒系列</i-button
          >
        </i-col>
      </row>
      <div>
        <br />
      </div>
      <Table
        border
        :columns="tableheader"
        :data="datalist"
        :loading="loading"
        @on-selection-change="enterall"
      >
        <template slot-scope="{ row }" slot="img">
          <img
            v-if="row.img"
            :src="row.img"
            width="60"
            height="60"
            style="padding: 3px"
            class="image"
          />
        </template>
        <template slot-scope="{ row }" slot="icon">
          <img
            v-if="row.icon"
            :src="row.icon"
            width="60"
            height="60"
            style="padding: 3px"
            class="image"
          />
        </template>
        <template slot-scope="{ row }" slot="switch">
          <i-switch
            v-model="row.state"
            size="large"
            :true-value="1"
            :false-value="0"
            @on-change="change_upNew(row.id, row.state)"
          >
            <span slot="open">上架</span>
            <span slot="close">下架</span>
          </i-switch>
        </template>
        <template slot-scope="{ row }" slot="action">
          <Button
            style="margin-right: 16px"
            type="success"
            size="small"
            icon="md-add"
            @click="create(row.id, row)"
            >添加盲盒</Button
          >
          <Button
            style="margin-right: 16px"
            type="warning"
            size="small"
            icon="md-add"
            @click="lookee(row.id)"
            >查看盲盒</Button
          >
          <Button
            style="margin-right: 10px"
            type="primary"
            size="small"
            icon="md-add"
            @click="changeText(row.id, row)"
            >修改</Button
          >
          <Button
            type="error"
            size="small"
            @click="remove(row.id)"
            icon="md-close"
            style="margin-left: 10px"
            >删除</Button
          >
        </template>
      </Table>
      <br />
      <div class="page">
        <Page
          :total="total"
          show-elevator
          show-total
          :page-size="data.pageSize"
          :current="data.page"
          @on-change="changePage"
        />
      </div>
      <Modal v-model="modal2" width="950px" @on-cancel="cancel">
        <p
          style="margin: 0; color: rgb(255, 102, 0); text-align: center"
          slot="header"
        >
          <span v-if="!update">
            <Icon type="ios-add-circle-outline" style="margin-right: 5px" />
            <span>添加</span>
          </span>
          <span v-else>
            <Icon type="md-create" style="margin-right: 5px" />
            <span>修改</span>
          </span>
        </p>
        
        <div>
          <div class="flex">
            <div
              style="
                width: 130px;
                line-height: 30px;
                text-algin: end;
                margin-right: 10px;
              "
            >
              盲盒名称
            </div>
            <i-input
              v-model="dataText1.name"
              placeholder="请输入盲盒名称"
            ></i-input>
          </div>
          <br />

        </div>
        <div slot="footer">
          <Button type="primary" :loading="loading" @click="save">保存</Button>
          <Button @click="modal2 = false">取消</Button>
        </div>
      </Modal>
    </section>
  </div>
</template>

<script>
import apis from "@/api/shop1";
import ImagePanel from "@/components/ImagePanel.vue";
// import KindEditor from '@/components/kindeditor.vue';
export default {
  components: { ImagePanel },
  data() {
    return {
      loading: true,
      modalAddText: false,
      update: false,
      tableheader: [
        {
          title: "分类名称",
          key: "name",
          align: "center",
        },
        {
          title: "价格",
          key: "price",
          align: "center",
        },

        {
          title: "图片",
          slot: "img",
          align: "center",
        },
        {
          title: "盒子图片",
          slot: "icon",
          align: "center",
        },

        {
          title: "大盲盒数量",
          key: "count",
          align: "center",
        },

        {
          title: "上下架",
          slot: "switch",
          width: 120,
          fixed: "right",
          align: "center",
        },
        {
          title: "操作",
          fixed: "right",
          slot: "action",
          width: 440,
          align: "center",
        },
      ],
      total: 0,
      id: "",
      pageNow: 1,
      datalist: [],
      data: {
        page: 1,
        pageSize: 10,
        status: 1,
      },
      dataText: {
        name: "",
        price: "",
        img: "",
        status: 1,
        introduce: "",
        icon: "",
      },
      introduceImg: [],
      dataText1: {
        img: "",
        seriesId: "",
        name: "",
        introduce: "",
        type: 1,
        state: 1,
      },
      modal2: false,
      searchText: "",
      enteralldata: [],
      editorTextCopy: '',  // content-change 事件回掉改变的对象
      editorText: ''
    };
  },
  created() {
    this.lookrecord();
  },
  methods: {
    create(id) {
      (this.dataText1.seriesId = id), (this.dataText1.name = "");
      this.dataText1.img = "";
      this.dataText1.introduce = "";
      this.modal2 = true;
      this.update = false;
    },
    lookee(e) {
      this.$router.push({
        path: "/shop/blindBox",
        query: {
          seriesId: e,
        },
      });
    },
    changegoods(e) {
      console.log(e);
      (this.dataText1.seriesId = e.id), (this.dataText.name = e.name);
      this.dataText.id = e.id;
      this.dataText.introduce = e.introduce;

      this.modal2 = true;
      this.update = true;
    },
    save() {
      this.loading = true;
      if (this.update) {
        apis
          .updatelist(this.dataText1)
          .then((response) => {
            this.loading = false;
            if (response.data.code == 0) {
              this.$Message.success("修改成功！");
              this.modal2 = false;
              this.lookrecord();
            } else {
              this.$Message.error("修改失败");
            }
          })
          .catch((error) => {
            this.loading = false;
            console.log(error);
            this.$Message.error("修改失败!");
          });
      } else {
        console.log(this.data);
        apis
          .add_list(this.dataText1)
          .then((response) => {
            this.loading = false;
            if (response.data.code == 0) {
              this.$Message.success("添加成功！");
              this.modal2 = false;
              this.lookrecord();
            } else {
              this.$Message.error("添加失败");
            }
          })
          .catch((error) => {
            this.loading = false;
            console.log(error);
            this.$Message.error("添加失败!");
          });
      }
    },
    confirm_images0(val) {
      this.introduceImg = [...this.introduceImg, ...val];
      console.log(this.introduceImg)
    },
    delete_image(index) {
      this.introduceImg.splice(index, 1)
    },
    confirm_images(val) {
      console.log(val);
      this.dataText.img = val[0];
    },
    confirm_images1(val) {
      console.log(val);
      this.dataText.icon = val[0];
    },
    addShow() {
      this.introduceImg = [];
      this.dataText.icon = '';
      this.modalAddText = true;
    },
    change_upNew(id, val) {
      let data = {
        id: id,
        state: val,
      };
      apis
        .upmanghetype(data)
        .then((response) => {
          if (response.data.code == 0) {
            this.$Message.success("修改成功");
            this.lookrecord();
          } else {
            this.$Message.error("修改失败!");
          }
        })
        .catch((error) => {
          console.log(error);
          this.$Message.error("修改失败!");
        });
    },
    ModalClose() {
      this.modalAddText = false;
      this.update = false;
    },
    changeText(id, data) {
      console.log("打开模态框");
      console.log(data);
      this.update = true;
      this.dataText.name = data.name;
      this.dataText.price = data.price;
      this.dataText.img = data.img;
      this.dataText.icon = data.icon;
      this.dataText.introduce = data.introduce;
      this.introduceImg = this.dataText.introduce.split(',');
      this.modalAddText = true;
      this.id = id;
      console.log(this.dataText);
    },
    lookrecord() {
      var _this = this;
      apis
        .getmanghelist(this.data)
        .then((response) => {
          console.log(response);
          if (response.data.code == 0) {
            _this.datalist = response.data.data.list;
            _this.total = response.data.data.total;
            this.loading = false;
          } else {
            this.$Message.error("请求失败!");
          }
        })
        .catch((error) => {
          console.log(error);
          this.loading = false;
          this.$Message.error("请求失败!");
        });
    },
    changePage(val) {
      console.log(val);
      this.data.page = val;
      this.lookrecord();
      this.loading = false;
    },
    enterall(e) {
      this.enteralldata = e;
      console.log(e);
    },
    AddText(name) {
      console.log(name);
      console.log(this.update);
      var that = this;
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (this.update) {
            this.dataText.id = this.id;
            apis
              .updatemanghelist({
                id: this.dataText.id,
                name: this.dataText.name,
                price: this.dataText.price,
                img: this.dataText.img,
                icon: this.dataText.icon,
                introduce: this.introduceImg.join(','),
                status: 1,
                state: 1,
              })
              .then((response) => {
                if (response.data.code == 0) {
                  this.$Message.success("修改成功");
                  that.lookrecord();
                  this.modalAddText = false;
                  this.update = false;
                } else {
                  this.$Message.error("修改失败");
                }
              });
          } else {
            apis
              .addmanghelist({
                name: this.dataText.name,
                price: this.dataText.price,
                img: this.dataText.img,
                icon: this.dataText.icon,
                introduce: this.introduceImg.join(','),
                status: 1,
                state: 1,
              })
              .then((response) => {
                this.loading = false;
                let resdata = response.data;
                if (resdata.code == 0) {
                  this.modalAddText = false;
                  this.update = false;
                  this.$Message.success("添加成功");
                  that.lookrecord();
                } else {
                  this.$Message.success("添加失败，请稍后重试");
                }
              });
          }
        }
      });
    },
    remove(id) {
      console.log(id);
      let lid = "";
      if (id) {
        lid = id;
      } else {
        this.enteralldata.map((itme) => {
          if (lid == "") {
            lid = itme.id;
          } else {
            lid += "," + itme.id;
          }
        });
      }
      apis
        .deletemanghelist({ id: lid })
        .then((response) => {
          console.log(response);
          if (response.data.code == 0) {
            this.$Message.success("删除成功");
            this.lookrecord();
          } else {
            this.$Message.error("删除失败!");
          }
        })
        .catch((error) => {
          console.log(error);
          this.loading = false;
          this.$Message.error("删除失败!");
        });
    },
    cancel() {
      this.$refs.dataText.resetFields();
      this.dataText.pr_top_price = "";
      this.dataText.pr_give_price = "";
      this.modalAddText = false;
      this.update = false;
    },
  },
};
</script>

<style scoped>
.dataPicker {
  display: inline-block;
  width: 450px;
}
.image {
  max-width: 100%;
  max-height: 100px;
  margin: 10px;
}
.avatar {
  width: 50px;
  height: 50px;
  border-radius: 90px;
  margin: 5px;
}
.page {
  text-align: center;
}
</style>